<template>
  <div class="box app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   折线图
                </span>
            </div>
            <div class="chart-pic" ref="chart_1"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   柱形图
                </span>
            </div>
            <div class="chart-pic" ref="chart_2"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   饼形图
                </span>
            </div>
            <div class="chart-pic" ref="chart_3"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   散点图
                </span>
            </div>
            <div class="chart-pic" ref="chart_4"></div>
          </div>
        </el-card>
      </el-col>


      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   K线图
                </span>
            </div>
            <div class="chart-pic" ref="chart_5"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   雷达图
                </span>
            </div>
            <div class="chart-pic" ref="chart_6"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   矩形树图
                </span>
            </div>
            <div class="chart-pic" ref="chart_7"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   旭日图
                </span>
            </div>
            <div class="chart-pic" ref="chart_8"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   漏斗图
                </span>
            </div>
            <div class="chart-pic" ref="chart_9"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   仪表图
                </span>
            </div>
            <div class="chart-pic" ref="chart_10"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'320px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   河流流向图
                </span>
            </div>
            <div class="chart-pic" ref="chart_11"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'echarts',
  data() {
    return {}
  },
  methods: {
    drawLine() {
      let chartDom = this.$refs.chart_1
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        xAxis: {
          type: 'category',
          splitLine: {
            show: true
          },
          axisLabel: {
            color: '#999'
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#999'
          }
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            symbolSize: 10,
            lineStyle: {
              color: '#1890FF',
              width: 3
            },
            itemStyle: {
              color: '#1890FF'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    drawBar() {
      let chartDom = this.$refs.chart_2
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            color: '#999'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#999'
          }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '25',
            itemStyle: {
              color: '#1890FF'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    drawPie() {
      let chartDom = this.$refs.chart_3
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: [10, 10, 10, 10],
              borderColor: '#fff',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    drawScatter() {
      let chartDom = this.$refs.chart_4
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        xAxis: {
          axisLabel: {
            color: '#999'
          }
        },
        yAxis: {
          axisLabel: {
            color: '#999'
          }
        },
        series: [
          {
            symbolSize: 10,
            itemStyle: {
              color: '#1890FF'
            },
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            type: 'scatter'
          }
        ]
      }
      myChart.setOption(option)
    },
    drawCandlestick() {
      let chartDom = this.$refs.chart_5
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        xAxis: {
          axisLabel: {
            color: '#999'
          },
          data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
        },
        yAxis: {
          axisLabel: {
            color: '#999'
          }
        },
        series: [
          {
            type: 'candlestick',
            itemStyle: {
              color: '#E6A0D2',
              color0: 'rgba(255, 0, 0, 0)',

              borderColor0: '#1890FF',
              borderColor: '#E6A0D2'
            },
            data: [
              [20, 34, 10, 38],
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42]
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    drawRadar() {
      let chartDom = this.$refs.chart_6
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        color: ['#1890FF', '#36CBCB'],
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '销售', max: 6500 },
            { name: '研发', max: 16000 },
            { name: '信息技术', max: 30000 },
            { name: '客服', max: 38000 },
            { name: '管理', max: 52000 },
            { name: '市场', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            symbolSize: 8,
            itemStyle: {},
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    drawTreemap() {
      let chartDom = this.$refs.chart_7
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        color: ['#1890FF', '#36CBCB'],
        series: [
          {
            type: 'treemap',
            data: [
              {
                name: 'nodeA',
                value: 10,
                children: [
                  {
                    name: 'nodeAa',
                    value: 4
                  },
                  {
                    name: 'nodeAb',
                    value: 6
                  }
                ]
              },
              {
                name: 'nodeB',
                value: 20,
                children: [
                  {
                    name: 'nodeBa',
                    value: 20,
                    children: [
                      {
                        name: 'nodeBa1',
                        value: 20
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    drawSunburst() {
      let chartDom = this.$refs.chart_8
      let myChart = this.$echarts.init(chartDom)
      let option
      const item1 = {
        color: '#4FD1D1'
      }
      const item2 = {
        color: '#F3768B'
      }
      const item3 = {
        color: '#FBD437'
      }
      const data = [
        {
          children: [
            {
              value: 5,
              children: [
                {
                  value: 1,
                  itemStyle: item1
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                },
                {
                  children: [
                    {
                      value: 1
                    }
                  ]
                }
              ],
              itemStyle: item1
            },
            {
              value: 10,
              children: [
                {
                  value: 6,
                  children: [
                    {
                      value: 1,
                      itemStyle: item1
                    },
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item2
                    },
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item3
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item3
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                }
              ],
              itemStyle: item1
            }
          ],
          itemStyle: item1
        },
        {
          value: 9,
          children: [
            {
              value: 4,
              children: [
                {
                  value: 2,
                  itemStyle: item2
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item1
                    }
                  ]
                }
              ],
              itemStyle: item1
            },
            {
              children: [
                {
                  value: 3,
                  children: [
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item2
        },
        {
          value: 7,
          children: [
            {
              children: [
                {
                  value: 1,
                  itemStyle: item3
                },
                {
                  value: 3,
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    },
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item2
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item1
                    }
                  ],
                  itemStyle: item1
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item1
        },
        {
          children: [
            {
              value: 6,
              children: [
                {
                  value: 1,
                  itemStyle: item2
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 2,
                      itemStyle: item2
                    }
                  ],
                  itemStyle: item1
                },
                {
                  value: 1,
                  itemStyle: item3
                }
              ],
              itemStyle: item3
            },
            {
              value: 3,
              children: [
                {
                  value: 1
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                },
                {
                  value: 1
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item1
        }
      ]
      option = {
        series: {
          radius: ['15%', '80%'],
          type: 'sunburst',
          sort: undefined,
          emphasis: {
            focus: 'ancestor'
          },
          data: data,
          label: {
            rotate: 'radial'
          },
          levels: [],
          itemStyle: {
            color: '#ddd',
            borderWidth: 2
          }
        }
      }
      myChart.setOption(option)
    },
    drawFunnel() {
      let chartDom = this.$refs.chart_9
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        calculable: true,
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '15%',
            top: 20,
            //x2: 80,
            bottom: 20,
            width: '70%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              normal: {
                show: true,
                position: 'outside'
              },
              emphasis: {
                textStyle: {
                  fontSize: 20
                }
              }
            },
            labelLine: {
              normal: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 1
              }
            },
            data: [
              { value: 60, name: '访问' },
              { value: 40, name: '咨询' },
              { value: 20, name: '订单' },
              { value: 80, name: '点击' },
              { value: 100, name: '展现' }
            ]
          }
        ]
      }

      myChart.setOption(option)
    },
    drawGauge() {
      let chartDom = this.$refs.chart_10
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { formatter: '{value}%', fontSize: '12' },
            data: [{ value: 50 }]
          }
        ]
      }

      app.timeTicket = setInterval(function() {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
        myChart.setOption(option, true)
      }, 2000)

      myChart.setOption(option)
    },
    drawThemeRiver() {
      let chartDom = this.$refs.chart_11
      let myChart = this.$echarts.init(chartDom)
      let option
      option = {
        color: ['#5470c6',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
          '#fc8452',
          '#9a60b4',
          '#ea7ccc'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(0,0,0,0.2)',
              width: 1,
              type: 'solid'
            }
          }
        },
        singleAxis: {
          top: 50,
          bottom: 50,
          axisTick: {},
          axisLabel: {},
          type: 'time',
          axisPointer: {
            animation: true,
            label: {
              show: true
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              opacity: 0.2
            }
          }
        },
        series: [
          {
            type: 'themeRiver',
            emphasis: {
              itemStyle: {
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.8)'
              }
            },
            data: [
              ['2015/11/08', 10, 'DQ'],
              ['2015/11/09', 15, 'DQ'],
              ['2015/11/10', 35, 'DQ'],
              ['2015/11/11', 38, 'DQ'],
              ['2015/11/12', 22, 'DQ'],
              ['2015/11/13', 16, 'DQ'],
              ['2015/11/14', 7, 'DQ'],
              ['2015/11/15', 2, 'DQ'],
              ['2015/11/16', 17, 'DQ'],
              ['2015/11/17', 33, 'DQ'],
              ['2015/11/18', 40, 'DQ'],
              ['2015/11/19', 32, 'DQ'],
              ['2015/11/20', 26, 'DQ'],
              ['2015/11/21', 35, 'DQ'],
              ['2015/11/22', 40, 'DQ'],
              ['2015/11/23', 32, 'DQ'],
              ['2015/11/24', 26, 'DQ'],
              ['2015/11/25', 22, 'DQ'],
              ['2015/11/26', 16, 'DQ'],
              ['2015/11/27', 22, 'DQ'],
              ['2015/11/28', 10, 'DQ'],
              ['2015/11/08', 35, 'TY'],
              ['2015/11/09', 36, 'TY'],
              ['2015/11/10', 37, 'TY'],
              ['2015/11/11', 22, 'TY'],
              ['2015/11/12', 24, 'TY'],
              ['2015/11/13', 26, 'TY'],
              ['2015/11/14', 34, 'TY'],
              ['2015/11/15', 21, 'TY'],
              ['2015/11/16', 18, 'TY'],
              ['2015/11/17', 45, 'TY'],
              ['2015/11/18', 32, 'TY'],
              ['2015/11/19', 35, 'TY'],
              ['2015/11/20', 30, 'TY'],
              ['2015/11/21', 28, 'TY'],
              ['2015/11/22', 27, 'TY'],
              ['2015/11/23', 26, 'TY'],
              ['2015/11/24', 15, 'TY'],
              ['2015/11/25', 30, 'TY'],
              ['2015/11/26', 35, 'TY'],
              ['2015/11/27', 42, 'TY'],
              ['2015/11/28', 42, 'TY'],
              ['2015/11/08', 21, 'SS'],
              ['2015/11/09', 25, 'SS'],
              ['2015/11/10', 27, 'SS'],
              ['2015/11/11', 23, 'SS'],
              ['2015/11/12', 24, 'SS'],
              ['2015/11/13', 21, 'SS'],
              ['2015/11/14', 35, 'SS'],
              ['2015/11/15', 39, 'SS'],
              ['2015/11/16', 40, 'SS'],
              ['2015/11/17', 36, 'SS'],
              ['2015/11/18', 33, 'SS'],
              ['2015/11/19', 43, 'SS'],
              ['2015/11/20', 40, 'SS'],
              ['2015/11/21', 34, 'SS'],
              ['2015/11/22', 28, 'SS'],
              ['2015/11/23', 26, 'SS'],
              ['2015/11/24', 37, 'SS'],
              ['2015/11/25', 41, 'SS'],
              ['2015/11/26', 46, 'SS'],
              ['2015/11/27', 47, 'SS'],
              ['2015/11/28', 41, 'SS'],
              ['2015/11/08', 10, 'QG'],
              ['2015/11/09', 15, 'QG'],
              ['2015/11/10', 35, 'QG'],
              ['2015/11/11', 38, 'QG'],
              ['2015/11/12', 22, 'QG'],
              ['2015/11/13', 16, 'QG'],
              ['2015/11/14', 7, 'QG'],
              ['2015/11/15', 2, 'QG'],
              ['2015/11/16', 17, 'QG'],
              ['2015/11/17', 33, 'QG'],
              ['2015/11/18', 40, 'QG'],
              ['2015/11/19', 32, 'QG'],
              ['2015/11/20', 26, 'QG'],
              ['2015/11/21', 35, 'QG'],
              ['2015/11/22', 40, 'QG'],
              ['2015/11/23', 32, 'QG'],
              ['2015/11/24', 26, 'QG'],
              ['2015/11/25', 22, 'QG'],
              ['2015/11/26', 16, 'QG'],
              ['2015/11/27', 22, 'QG'],
              ['2015/11/28', 10, 'QG'],
              ['2015/11/08', 10, 'SY'],
              ['2015/11/09', 15, 'SY'],
              ['2015/11/10', 35, 'SY'],
              ['2015/11/11', 38, 'SY'],
              ['2015/11/12', 22, 'SY'],
              ['2015/11/13', 16, 'SY'],
              ['2015/11/14', 7, 'SY'],
              ['2015/11/15', 2, 'SY'],
              ['2015/11/16', 17, 'SY'],
              ['2015/11/17', 33, 'SY'],
              ['2015/11/18', 40, 'SY'],
              ['2015/11/19', 32, 'SY'],
              ['2015/11/20', 26, 'SY'],
              ['2015/11/21', 35, 'SY'],
              ['2015/11/22', 4, 'SY'],
              ['2015/11/23', 32, 'SY'],
              ['2015/11/24', 26, 'SY'],
              ['2015/11/25', 22, 'SY'],
              ['2015/11/26', 16, 'SY'],
              ['2015/11/27', 22, 'SY'],
              ['2015/11/28', 10, 'SY'],
              ['2015/11/08', 10, 'DD'],
              ['2015/11/09', 15, 'DD'],
              ['2015/11/10', 35, 'DD'],
              ['2015/11/11', 38, 'DD'],
              ['2015/11/12', 22, 'DD'],
              ['2015/11/13', 16, 'DD'],
              ['2015/11/14', 7, 'DD'],
              ['2015/11/15', 2, 'DD'],
              ['2015/11/16', 17, 'DD'],
              ['2015/11/17', 33, 'DD'],
              ['2015/11/18', 4, 'DD'],
              ['2015/11/19', 32, 'DD'],
              ['2015/11/20', 26, 'DD'],
              ['2015/11/21', 35, 'DD'],
              ['2015/11/22', 40, 'DD'],
              ['2015/11/23', 32, 'DD'],
              ['2015/11/24', 26, 'DD'],
              ['2015/11/25', 22, 'DD'],
              ['2015/11/26', 16, 'DD'],
              ['2015/11/27', 22, 'DD'],
              ['2015/11/28', 10, 'DD']
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted() {
    this.drawLine()
    this.drawPie()
    this.drawBar()
    this.drawScatter()
    this.drawCandlestick()
    this.drawRadar()
    this.drawTreemap()
    this.drawSunburst()
    this.drawFunnel()
    this.drawGauge()
    this.drawThemeRiver()
  }
}
</script>

<style scoped lang="scss">

.box {
  padding-bottom: 50px;
  .el-col {
    margin-bottom: 20px;
  }

  .head-chart {
    display: flex;
    padding: 20px 20px 20px 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E4E7ED;

    .icon-chart {
      font-size: 14px;

      i {
        margin-right: 5px;
      }
    }
  }

  .chart-pic {
    height: 80%;
  }
}
</style>
